<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <myheader></myheader>

        <!-- html 里面不能有大写字母 需改为小写前面加 - -->
        <first-cpt></first-cpt> 

        <mydemo></mydemo>

        <myfooter></myfooter>

        <mygirl></mygirl>


        
    </div>
</body>
<script>
    //全局注册
    Vue.component("myheader", {
        template: "<header>what are you doing?</header>"
    })

    Vue.component("firstCpt",{
        template:"<h3>this is my firstCpt</h3>"
    })

    Vue.component("mydemo",{
        // 报错  组件模板只能包含一个 顶层标签 
        // template:"<p>goood good study</p> <p>day day up</p>"
        template:"<div><p>goood good study</p> <p>day day up</p></div>"
    })

    Vue.component("myfooter",{
        // template:"<footer>标签名不能与组件名一致,标签名优先级会高一点</footer>"
        template:"<footer>标签名不能与组件名一致,标签名优先级会高一点</footer>"
    })
    const vm = new Vue({
        components:{
            mygirl:{
                template:"<footer>where are you ?</footer>"
            }
        },
        data: {
            title: "组件基础"

        },
        methods: {

        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }

    }).$mount("#app")
</script>

</html>